<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>挖矿列表</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            height: auto;
            background-color: #F8F8F8;
            font-family: Helvetica;
            color: #333333;
            font-size: 0.28rem;
            font-family: PingFang SC;
            position: relative;
        }

        #showmakeOverPower {
            width: 100%;
            height: auto;
            margin-top: 0.6rem;
        }

        #showmakeOverPower ul {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            padding: 0 0.3rem;
            box-sizing: border-box;
            justify-content: center;
        }

        #showmakeOverPower ul li {
            width: 100%;
            height: 3.2rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            padding: 0 0.3rem;
            box-sizing: border-box;
            justify-content: center;
            background-color: #fff;
            border-radius: 0.1rem;
        }

        #showmakeOverPower ul li>div {
            width: 100%;
        }

        #showmakeOverPower ul li>p {
            width: 100%;
            height: 0.66rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
        }

        #showmakeOverPower ul li>p img {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 100%;
            margin-right: 0.1rem;
        }

        #showmakeOverPower ul li>p span {
            color: #fff;
            padding: 0.08rem 0.1rem;
            font-size: 0.2rem;
            border-radius: 0.1rem;
            margin-left: 0.12rem;
        }

        #showmakeOverPower ul li>p span:first-of-type {
            background-color: #ffd203;
            margin-left: 0.3rem;
        }

        #showmakeOverPower ul li>p span:nth-of-type(2) {
            background-color: #ffb9a1;
        }

        #showmakeOverPower ul li>p span:last-of-type {
            background-color: #a5d780;
        }

        .showPrice {
            height: auto;
            margin-top: 0.1rem;
        }

        .showPrice div:first-of-type {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        .showPrice div:first-of-type>p {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
        }

        .showPrice div:first-of-type>p:not(:first-of-type) {
            margin-top: 0.06rem;
        }

        #agreement ul p,
        #agreement ul span {
            line-height: 100%;
        }

        .container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            color: #262626;
            min-height: 100%;
            position: relative
        }

        #agreement ul,
        #agreement li {
            text-decoration: none;
            display: block;
        }

        #agreement .loadToast {
            padding: 0.4rem 0;
            color: #9e9b9b;
            text-align: center;
            font-size: 0.24rem;
        }

        #agreement #toast {
            position: fixed;
            z-index: 1;
            height: 0.7rem;
            line-height: 0.7rem;
            background: #FFFBED;
            padding: 0 0.32rem;
            width: 100%;
            color: #E19511;
            font-size: 0.26rem;
        }

        #agreement #toast img {
            width: 0.32rem;
            height: 0.32rem;
            vertical-align: middle;
            margin-left: 0.06rem
        }

        #agreement #toast span {
            line-height: 0.7rem;
            vertical-align: middle;
        }

        #agreement #list li {
            padding: 0 0.32rem;
            margin-top: 0.15rem;
            background: #fff;
        }

        #agreement #list li:first-child {
            margin-top: 0;
        }

        #agreement #list {
            padding: 0.7rem 0rem 0rem 0rem;
        }

        #agreement .managerTxt img {
            width: 0.25rem;
            height: 0.26rem;
        }

        #agreement .name,
        #agreement .managerTxt {
            font-size: 0.28rem;
        }

        #agreement .name {
            padding-top: 0.5rem;
            font-family: 'PingFang-SC-Bold';
            font-weight: bold;
        }

        #agreement .managerTxt {
            padding-top: 0.25rem;
        }

        #agreement .detail {
            overflow: hidden;
            position: relative;
            padding-top: 0.39rem;
        }

        #agreement .detail .title {
            color: #8E979E;
            font-size: 0.22rem;
        }

        #agreement .detail .content {
            color: #262626;
            font-size: 0.24rem;
        }

        #agreement .detail>span {
            float: left;
        }

        #agreement .detail>span:last-child {
            float: right;
        }

        #agreement .detail>span:nth-child(2),
        #agreement .detail>span:nth-child(3) {
            padding-left: 1.05rem;
            display: inline-block;
            width: 2.35rem;
        }

        #agreement #addTextClass li .detail:last-child {
            padding-top: 0.25rem;
            padding-bottom: 0.35rem;
        }

        .snapupClass {
            background: url("../../image/bgbtcbhpxa.png") no-repeat center;
            background-size: cover;
        }

        .newPersen {
            background: url("../../image/bgbtcbhpxb.png") no-repeat center;
            background-size: cover;
        }

        .blackClass {
            background-color: #ffffff;
        }

        .showStartPrice {
            width: 100%;
            height: 0.71rem;
            background-color: #ffffff;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.24rem;
            font-family: PingFang SC;
            color: rgba(142, 151, 158, 1);
            border-top: 1px solid #F3F3F3;
            margin-top: 0.2rem;
        }

        #listState {
            width: 100%;
            font-size: 0.25rem;
            text-align: center;
            color: #999999;
            padding: 10px 0;
            margin-top: 0.5rem;
        }

        .listState {
            width: 100%;
            font-size: 0.25rem;
            text-align: center;
            color: #999999;
            padding: 10px 0;
            margin-top: 0.2rem;
        }
    </style>
</head>

<body>
    <div id="showmakeOverPower">
        <ul class="showmakeOverPower">
            <!-- <li style="margin-top:0.2rem;">
            <p>
                <img src="../../image/cnyicnx.png"> <b class="userName" style="font-size: 0.24rem;"> 居然要昵称 </b>
                <img src="../../image/cnyicnx.png" alt=""
                    style="width: auto;height: 0.4rem;margin-left: 0.1rem;border-radius: 0">
                <span style="background-color:#ffd203;display:inline;margin-left: 0.1rem">双挖</span>
                <span style="background-color:#a5d780;">达标上浮</span>
            </p>
            <div class="showPrice">
                <div>
                    <p>
                        <span>
                            转让单价
                        </span>
                        <span style="color:#FF7C34;">
                            3000 CNY
                        </span>
                    </p>
                    <p>
                        <span>
                            转让总额
                        </span>
                        <span style="color:#FF7C34;">
                            0.00 CNY
                        </span>
                    </p>
                    <p>
                        <span>
                            分币比例
                        </span>
                        <span style="color: #626262">
                            50%
                        </span>
                    </p>
                    <p>
                        <span>
                            转让BTC算力 <span style="color: #262626;">6T</span>
                        </span>
                        <span>
                            转让BHP参配算力 <span style="color: #262626;">0T</span>
                        </span>
                    </p>
                    <p>
                        <span>
                            转让时间
                        </span>
                        <span style="color: #626262">
                            2020-05-22
                        </span>
                    </p>
                </div>
            </div>
        </li> -->
        </ul>
        <div class="listState"></div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var c2CDialog = app.getSyncStorage("c2CDialog");
        var transferPage = 1; //转让页面当前页数
        var transferToatalPage = 0; //转让页面总页数
        var getDataNeed = {
            token: account ? account.token : "",
            page: transferPage,//当前页
            payCurrency: "",//支付方式
            isBhpPos: "All",//是否是双挖
            productDepositAd: 1,//按照转租单转出单价排序查询 1-降序 2-升序
            totalPowerAd: 1//按算力排序 1-降序 2-升序
        }
        var Ipfs_Y = app.safetyHeaderArea + 10;
        if (app.ST == "ios") {
            Ipfs_Y = app.safetyHeaderArea + 45;
        }
        app.openFrame({
            name: "orintime",
            url: app.hd + "mainpage/orintime.html",
            bgColor: "",
            rect: {
                x: 0,
                y: Ipfs_Y,
                w: app.W,
                h: 60
            }
        });
        if (!c2CDialog || c2CDialog == "false") {
            var param = {
                dtype: "dialog73",
                stopPropagation: true,//阻止点击body冒泡
            };
            app.dialog(param);
        }
        //获取转让列表
        function getTransferData(isdown, getDataNeed) {
            app.ajaxPro({
                url: "transfer/lists",
                values: getDataNeed,
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    transferToatalPage = ret.data.totalPage;
                    var myTdPower = ret.data.userAge;
                    var thisList = ret.data.list;
                    thisList.map(function (item, index) {
                        item.username = item.fromUsername.length > 10 ? (item.fromUsername.slice(0, 6) + "…") : item.fromUsername;
                        item.myTdPower = myTdPower;//用户算龄
                        item.mechine = JSON.stringify(item);
                        item.total_power = app.accMul(item.basePower, item.num);
                        item.bhpPower = app.accMul(item.bhpPower, item.num);
                        item.distributionRate = app.accMul(item.distributionRate, 100);
                        item.productDeposit = app.accDiv(item.productDeposit, item.basePower);
                        item.total_deposit = app.accMul(item.productDeposit, item.total_power);
                        if (item.paymentCurrencyCode != "USDT") {
                            item.total_deposit = app.sliceNum(item.total_deposit, 2);
                            item.goods_deposit = app.sliceNum(item.productDeposit, 2);
                        } else {
                            item.total_deposit = app.sliceNum(item.total_deposit, 4);
                            item.goods_deposit = app.sliceNum(item.productDeposit, 4);
                        }
                        var imgArr = ['grade_one.png', 'grade_two.png', 'grade_three.png', 'grade_four.png', 'grade_five.png', 'grade_six.png'];
                        var grade = Number(item.user_level) - 1;
                        item.gradeImg = '../../image/' + imgArr[grade];
                    });
                    // 渲染模板
                    var temp = doT.template($("#tranferListData").text());
                    if (isdown) {
                        $(".showmakeOverPower").html(temp(thisList));
                    } else {
                        $(".showmakeOverPower").append(temp(thisList));
                    }
                    if (transferPage == 1 && thisList.length == 0) {
                        $(".listState").text("暂时没有相关数据");
                    }
                    if (transferPage < transferToatalPage) {
                        $(".listState").text("加载更多");
                    }
                    if (transferPage >= transferToatalPage) {
                        $(".listState").text("没有更多数据了");
                    }
                } else {
                    app.toast(ret.message)
                }

            })
        }
        getTransferData(true, getDataNeed);
        //监听转让专区的算力和价格的选择
        app.listen("transferChoose", function (ret) {
            $(".listService").hide();
            $("body div ul").empty();
            transferPage = 1;
            transferToatalPage = 0;
            getDataNeed.page = transferPage;
            getDataNeed.totalPowerAd = ret.value.transferpower;
            getDataNeed.productDepositAd = ret.value.transferprice;
            $("body").scrollTop(0);
            $(".showmakeOverPower").empty();
            getTransferData(true, getDataNeed);
        });
        app.headerMap();
    }
</script>
<!-- 转让列表 -->
<script type="text/html" id="tranferListData">
    {{~it:item:index}}
    <li style="margin-top:0.2rem;" data-machineID="{{=item.orderId}}" data-status="{{=item.state}}"
        data-isPos="{{=item.isBhpPos}}" data-power="{{=item.myTdPower}}" data-isSelf="{{=item.is_self}}">
        <!-- {{=item.state==1?"已转让":"立即承接"}} -->
        <p>
            <img src="{{=item.avatar}}"> <b class="userName" style="font-size: 0.24rem;"> {{=item.username}} </b>
            <img src="{{=item.gradeImg}}" style="width: auto;height: 0.4rem;margin-left: 0.1rem;border-radius: 0">
            <span style="background-color:{{=item.isBhpPos==1?'#ffd203':'#d0d4da'}};display:{{=item.isBhpPos==1?'inline':'none'}};margin-left: 0.1rem">双挖</span>
            {{?item.is_float==1 && item.isBhpPos!=1}}
            <span style="background-color:{{=item.isFloatPower==1?'#a5d780':'#d0d4da'}};">达标上浮</span>
            {{?}}
        </p>
        <div class="showPrice">
            <div>
                <p>
                        <span>
                            转让单价
                        </span>
                    <span style="color:#FF7C34;">
                            {{=item.goods_deposit}} {{=item.paymentCurrencyCode}}
                        </span>
                </p>
                <p>
                        <span>
                            转让总额
                        </span>
                    <span style="color:#FF7C34;">
                            {{=item.total_deposit}} {{=item.paymentCurrencyCode}}
                        </span>
                </p>
                <p>
                        <span>
                            分币比例
                        </span>
                    <span style="color: #626262">
                            {{=item.distributionRate}} %
                        </span>
                </p>
                <p>
                        <span>
                            转让BTC算力
                        </span>
                    <span style="color: #626262">
                            {{=item.total_power}}T
                        </span>
                </p>
                <p style="display:{{=item.isBhpPos==1?'flex':'none'}};">
                        <span>
                            转让BHP参配算力
                        </span>
                    <span style="color: #626262">
                            {{=item.bhpPower}}T
                        </span>
                </p>
                <p>
                        <span>
                            转让时间
                        </span>
                    <span style="color: #626262">
                        {{=item.operateTime}}
                    </span>
                </p>
            </div>
        </div>
    </li>
    {{~}}
</script>

</html>